<!doctype html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>借阅列表</title>
    <link rel="stylesheet" type="text/css" th:href="@{/style/tzjg.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/mb/css/bootstrap.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/mb/css/css.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/mb/css/Animation.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/style/container.css}">
    <link rel="stylesheet" th:href="@{/layui/dist/css/view.css}"/>
    <link rel="stylesheet" th:href="@{/layui/dist/css/layui.css}" media="all">

</head>

<body>
<!--头开始-->
<header class="navbar-fixed-top headerbg">
    <!--导航栏剩余部分-->
    <div class="navBox hidden-xs hidden-sm" style="float: right;margin-right: 10%">
        <ul class="navList list-unstyled">
            <li class="navLi">
                <h3>
                    <a th:href="@{/myBook}" style="text-decoration: none" th:text="'hello，'+${username}">hello，xxx</a>
                </h3>
            </li>
            <li class="navLi">
                <h3>&nbsp;&nbsp;&nbsp;</h3>
            </li>
            <li class="navLi">
                <h3><a th:href="@{/index}">返回首页</a></h3>
            </li>
            <li class="navLi">
                <h3>&nbsp;&nbsp;&nbsp;</h3>
            </li>
            <li class="navLi">
                <h3><a th:href="@{/revampUser}">修改信息</a></h3>
            </li>
            <li class="navLi">
                <h3>&nbsp;&nbsp;&nbsp;</h3>
            </li>
            <li class="navLi">
                <h3><a th:href="@{/loginout}">注销</a></h3>
            </li>
        </ul>
    </div>
</header>
<!--头结尾-->
<!--动态线条-->
<div class="bannerN animated" style="height:200px;">
    <div class="imgFull"><img class="img-responsive" th:src="@{/mb/images/ab_bg_01.png}"></div>
    <div class="clouds_one"></div>
    <div class="clouds_two"></div>
    <div class="clouds_three"></div>
</div>

<div class="container pb-15" style="width: 90%;margin-left: 5%;">
    <!-- Example row of columns -->
    <div class="row">
        <div class="label-div b-30 border-all pt-5 t-20" style="position: relative; padding-left: 0;">
            <div style="padding-left:30px;width: 90%;margin-left: 5%;">

                <div class="second" style="height: auto">
                    <h5 class="mmh5 b-20">我的借阅</h5>
                    <div class="news-list">
                        <div style="width: 752px;" th:each="list:${booklist}">
                            <div class="news_list mtb20">
                                <ul class="list_style">
                                    <li class="news_info wow fadeInUp" style="width: 1160px">
                                        <span class="contents" style="width: 1160px">
                                            <div class="news_time">
                                                <img class="lazyloadimg" alt="书籍封面"
                                                     th:src="@{'/article/'+${list.getBook().photo}}" width="135px"
                                                     height="135px"/>
                                            </div>
                                            <div class="news_contents">
                                                <h3 style="display: inline">
                                                    <a th:href="@{/bookDetails(bookNumber=${list.getBook().bookNumber})}"
                                                       style="color: #0C0C0C">
                                                      <span th:text="${list.getBook().bookName}">书名</span>
                                                    </a>
                                                </h3>
                                                <p th:text="${'&nbsp;&nbsp;'+list.getBook().bookAuthor}"
                                                   style="display: inline">作者</p>
                                                <p th:text="${'&nbsp;&nbsp;'+list.getBook().bookPublishers}"
                                                   style="display: inline">出版社</p>
                                                <p style="display: inline">&nbsp;&nbsp;借书日期（<a
                                                        th:text="${#dates.format(list.borrowingTime,'yyyy-MM-dd hh:mm:ss')}">
                                                    2018-7-18 00:00:00</a>）</p>
                                                <p style="display: inline">
                                                    <a class="gh" th:href="@{/revert(bookNumber=${list.getBook().bookNumber})}" onclick="return confirm('请确认书籍是否归还')" style="color: blue">归还书籍</a></p>
                                            </div>
                                                <br>
                                            <div style="padding:15px 5px 10px 170px;width:1100px;height:150px;">
                                                      <p th:text="${'&nbsp;&nbsp;书籍简介：'+list.getBook().brief}"
                                                         readonly="readonly">简介
                                                  </p>
                                            </div>
                                        </span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div style="margin-top: 80px"></div>
<footer class="footerBg" style="position:fixed;bottom: 0;z-index:30;width: 100%;margin-top:20px">
    <div class="container"><span class="footer_logo"><img th:src="@{/mb/images/mclogo.png}"></span><span
            class="CopyRight_name">图书管理系统 </span></div>
</footer>

</body>
<script type="text/javascript" th:src="@{/js/function.js}"></script>
<script type="text/javascript" th:src="@{/js/tzjg.js}"></script>
<script type="text/javascript" th:src="@{/js/borsertocss.js}"></script><!-- 判断在IE9以下浏览器中根据像素的不同而设置的样式 -->
<script type="text/javascript" th:src="@{/js/bootstrap.js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{/mb/js/jquery-3.3.1.min.js}"></script>
<script type="text/javascript" th:src="@{/mb/js/jquery.js}"></script>
<script type="text/javascript" th:src="@{/layui/dist/layui.all.js}" charset="utf-8"></script>
<script type="text/javascript" th:src="@{/js/Contacts.js}"></script>
<script type="text/javascript" th:src="@{/js/bioV4.min.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery.lazyload.mini.js}"></script>
</html>